<template>
	<view >
		<view class="rider_Tabs">
			<u-tabs :list="list1" lineColor="#67ae76" @click.stop="click"></u-tabs>
			<image src="../../static/img/sc.png" mode="" @click.stop="scanCode"></image>
		</view>
		<view class="rider_state" v-if="state == true">
			<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png">
			</u-empty>
		</view>
		<view class="rider_mask" v-if="model == true">
			<!-- 温馨提示 -->
			<view class="rider_model" v-if="modelState == true">
				<view class="rider_head">
					<p>温馨提示</p>
					<image src="../../static/img/colse.png" mode="" @click.stop="cancel"></image>
				</view>
				<view class="rider_text">
					<p>请确认您是否取餐~</p>
				</view>
				<view class="rider_content">
					<image src="../../static/img/bell.png" mode=""></image>
					<p>取单号</p>
					<p>CF1</p>
				</view>
				<view class="rider_btn" @click.stop="takeMeal">
					取餐
				</view>
			</view>

			<!-- 是否送达 -->
			<view class="rider_model" v-if="deliver == true">
				<view class="rider_head">
					<p>温馨提示</p>
					<image src="../../static/img/colse.png" mode="" @click.stop="cancel2"></image>
				</view>
				<view class="rider_text">
					<p>请确认您的订单是否送达~</p>
				</view>
				<view class="rider_content">
					<image src="../../static/img/bell.png" mode=""></image>
					<p>成飞自提1号点位</p>
					<p style="font-size: 24rpx; color: #B4B4B4;">四川省成都市青羊区成飞公园产业园1号仓库</p>
				</view>
				<view class="rider_btn" @click.stop="trDeliver">
					确认送达
				</view>
			</view>


			<!-- 取餐成功 -->
			<view class="takeMealTrue" v-if="trueShow == true">
				<image src="../../static/img/colse.png" mode=""></image>
				<image src="../../static/img/true.png" mode=""></image>
				<p>取餐成功</p>
			</view>

			<!-- 送达成功 -->
			<view class="takeMealTrue" v-if="trueDeliver == true">
				<image src="../../static/img/colse.png" mode=""></image>
				<image src="../../static/img/true.png" mode=""></image>
				<p>送达成功</p>
			</view>

		</view>
		<view class="rider_item" v-if="address.state == riderState" @click="goOD">
			<view class="item_head">
				<p>订单号：202407080001</p>
				<p>取单号</p>
				<p>CF1</p>
			</view>
			<view class="item_content">
				<u-steps inactiveColor="#5caf5d" activeColor="#5caf5d" :current="address.state" direction="column">
					<u-steps-item :title="address.title" :desc="address.text">
					</u-steps-item>
					<u-steps-item :title="address.title1" :desc="address.text1">
					</u-steps-item>
				</u-steps>
			</view>
			<view class="item_info">
				<p>订单金额：￥18.00</p>
				<p>下单时间：2024-07.17 15:57:31</p>
				<p>订单备注：XXXXXXXXXXXX</p>
				<p v-if="address.state == 2">配送人员：外卖员1</p>
			</view>
			<view class="item_btn" v-if="address.state == 1">
				<view class="item_btn1">
					联系用户
				</view>
				<view class="item_btn2" @click.stop="riderDeliver">
					订单送达
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: '配送中',
				}, {
					name: '已送达'
				}],
				riderState:1,
				state: false, //内容为空
				model: false, //遮罩层
				modelState: false, //取餐
				trueShow: false, //取餐成功
				deliver: false, //送达
				trueDeliver: false, //送达成功
				address: {
					state: 1,
					title: "成飞餐厅",
					text: "四川省成都市青羊区成飞公园产业园1号仓库",
					title1: "成飞自提1号点位",
					text1: "四川省成都市青羊区成飞公园产业园1号仓库",
				}
			}
		},
		methods: {
			click(item) {
				if(item.index == 0){
					this.riderState = 1
				}else{
					this.riderState = 2
				}
			},
			//扫码
			scanCode() {
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			//关闭弹窗
			close() {
				this.state = false
			},
			//取餐
			takeMeal() {
				this.state = false
				this.modelState = true
				setTimeout(() => {
					this.trueShow = true
					this.model = true
				}, 500)

			},
			//关闭弹窗
			cancel() {
				this.state = true
				this.modelState = true
			},
			//关闭弹窗
			cancel2() {
				this.model = false
				this.deliver = false
			},
			//确认送达
			trDeliver() {
				this.trueDeliver = true
				this.deliver = false
				this.address.state = 2
				setTimeout(() => {
					this.model = false
					this.trueDeliver = false
					this.deliver = false
				}, 1000)
				
			},
			riderDeliver(){
				this.model = true
				this.deliver = true
			},
			//骑手完成的订单详情
			goOD(){
				uni.navigateTo({
					url:'/homepage/riderOrderDetails/riderOrderDetails'
				})
			}
		}
	}
</script>

<style>
	.u-modal__content {
		padding: 12px 25px 25px 0px !important;
	}
</style>

<style lang="scss">
	.rider_Tabs {
		display: flex;
		justify-content: space-between;
		align-items: center;

		image {
			width: 40rpx;
			height: 36rpx;
			padding-right: 30rpx;
		}
	}

	.rider_mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);

		.rider_model {
			width: 586rpx;
			height: 480rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			background: white;
			position: absolute;
			top: 30%;
			left: 12%;

			.rider_head {

				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 30rpx;
				margin-left: 195rpx;

				p {
					font-size: 34rpx;
					font-weight: bold;
				}

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}

			.rider_text {

				margin: 20rpx;

				p {
					font-size: 28rpx;
				}
			}

			.rider_content {
				text-align: center;

				p {
					margin-top: 10rpx;
				}

				p:nth-child(2) {
					font-size: 32rpx;
				}

				p:nth-child(3) {
					font-size: 36rpx;
					font-weight: bold;
				}

				image {
					width: 92rpx;
					height: 100rpx;
				}
			}

			.rider_btn {
				width: 440rpx;
				height: 64rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				background: #5CAF5D;
				text-align: center;
				line-height: 64rpx;
				color: white;
				font-size: 28rpx;
				margin: 10rpx auto;
			}



		}

		.takeMealTrue {
			width: 586rpx;
			height: 296rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			background: white;
			position: absolute;
			top: 30%;
			left: 12%;

			image:nth-child(1) {
				width: 24rpx;
				height: 24rpx;
				position: absolute;
				right: 20rpx;
				top: 20rpx;
			}

			image:nth-child(2) {
				width: 236rpx;
				height: 140rpx;
				position: absolute;
				top: 20%;
				left: 31%;
			}

			p:nth-child(3) {
				font-size: 28rpx;
				position: absolute;
				left: 40%;
				bottom: 20rpx;
			}
		}

	}

	.rider_item {
		width: 710rpx;
		height: 538rpx;
		background: white;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 20rpx auto;
		box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
		padding: 0 23rpx;

		.item_head {
			display: flex;
			justify-content: space-between;
			padding: 10rpx 20rpx 0 0;

			p:nth-child(3) {
				position: absolute;
				top: 170rpx;
				right: 60rpx;
			}
		}

		.item_info {
			margin-top: 10rpx;

			p {
				margin-top: 10rpx;
				font-size: 24rpx;
			}
		}

		.item_btn {
			display: flex;
			justify-content: space-between;
			margin: 30rpx 20rpx 0 110rpx;

			.item_btn1 {
				width: 272rpx;
				height: 62rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				border: 1rpx solid #5CAF5D;
				background: white;
				text-align: center;
				line-height: 62rpx;
				color: #5CAF5D;
			}

			.item_btn2 {
				width: 272rpx;
				height: 62rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				background: #5caf5d;
				text-align: center;
				line-height: 62rpx;
				color: white;
			}
		}
	}
</style>